<style lang="less">
.invoice-modal {
  .title {
    color: #101010;
    margin-bottom: 10px;
    &--red {
      color: #ff3c55;
    }
  }
}
</style>

<template>
  <a-modal
    class="invoice-modal"
    v-model:visible="visible"
    title-align="start"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <template #title> 确认开票 </template>
    <template v-if="invoiceType === 0">
      <p class="title">
        确认发票已发送至用户邮箱？请输入“<span class="title--red">确认开票</span
        >”后操作
      </p>
      <a-input v-model="confirmInput" placeholder="请输入" allow-clear />
    </template>
    <template v-else>
      <p class="title">请填写快递信息</p>
      <a-form :model="form" auto-label-width>
        <a-form-item field="expressCompany" label="快递公司">
          <a-select
            placeholder="请选择快递公司"
            v-model="form.expressCompany"
            allow-search
          >
            <a-option v-for="it in logisticsCompany" :key="it.code">{{
              it.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="orderNumber" label="运单号：">
          <a-input v-model="form.orderNumber" placeholder="请输入运单号" />
        </a-form-item>
      </a-form>
    </template>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button
        type="primary"
        :disabled="confirmBtnDisabled"
        @click="confirmClickHandle"
        >确定</a-button
      >
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  computed,
  defineProps,
  defineEmits,
  withDefaults,
} from "vue";
import { order } from "@/api";
import { logisticsCompany } from "@/constant/logisticsCompany";
import { Message } from "@arco-design/web-vue";

interface PropsType {
  visible: boolean;
  invoiceType: number | string;
  orderId: number | string;
}
interface EmitType {
  (e: "changeModelVisible", v: boolean): void;
  (e: "updateInvoiceRecords"): void;
}

const props = withDefaults(defineProps<PropsType>(), {
  visible: false,
  invoiceType: 0,
});
const emit = defineEmits<EmitType>();

const handleCancel = () => {
  emit("changeModelVisible", false);
};
const handleClose = () => {
  confirmInput.value = "";
  form.value = {
    expressCompany: "",
    orderNumber: "",
  };
};

const confirmInput = ref("");
const confirmBtnDisabled = computed(() => {
  if (props.invoiceType === 0) {
    // 电子发票
    if (confirmInput.value === "确认开票") {
      return false;
    }
    return true;
  } else {
    // 专用发票
    return false;
  }
});

const confirmClickHandle = () => {
  invoicing();
  emit("changeModelVisible", false);
};

const form: any = ref({
  expressCompany: "",
  orderNumber: "",
});
const invoicing = async () => {
  const body: { id: any; expressCompany?: string; orderNumber?: string } = {
    id: props.orderId,
  };
  if (form.expressCompany && form.orderNumber) {
    body.expressCompany = form.expressCompany;
    body.orderNumber = form.orderNumber;
  }
  const { ok, data } = await order.invoicing(body);
  if (!ok) return;
  Message.success("开票成功");
  emit("updateInvoiceRecords");
};
</script>
